.tracks
  display table
  width 100%
  padding 3px

.track
  padding 12px 12px
  line-height 24px
  display table-row

  &-header,
  &-body
    display table-cell
    vertical-align top

  &-label
    background #222
    padding 0 6px
    color #ccc
    font-weight bold
    text-shadow 0 1px 0 black
    border-left 3px solid orangered

  &-controls
    display flex
    flex-direction row
    align-items center
    margin-bottom 6px
    margin-left 3px
    & .btn
      width 24px
      padding 0
      text-align center
    & .knob
      margin-left 6px

  .sequencer
    display flex
    flex-direction row

/// LAUNCHER

.launcher
  margin-top 36px
  display flex
  flex-direction row
  justify-content center

  .track
    background rgba(0,0,0,0.3)
    display flex
    flex-direction column
    line-height 20px
    padding 0 0 0 3px
    &:first-child
      padding-left 0

    .track-name
      font-weight bold
      padding 2px 6px
      background linear-gradient(to bottom,rgba(0,0,0,0.0), rgba(0,0,0,0.5))
      text-shadow 0 2px 1px black

    .clip
      padding 2px 6px
      text-shadow 0 2px 1px black
      background rgba(0,0,0,0.5)
      transition background 0.2s ease-out
      cursor pointer
      &:hover
        background rgba(0,0,0,0.6)
